<div data-test-setting="logo" ...attributes>
    <GhUploader
        @extensions={{this.imageExtensions}}
        @onComplete={{this.imageUploaded}}
        as |uploader|
    >
        <div>
            <label class="gh-setting-title" for="publication-logo">Publication logo</label>
            <div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>

            <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
                {{#each uploader.errors as |error|}}
                    <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
                {{/each}}
                {{#if uploader.isUploading}}
                    {{uploader.progressBar}}
                {{else if this.settings.logo}}
                    <div class="gh-branding-image-container largeimg justify-center transparent-bg">
                        <input
                            id="publication-logo"
                            type="image"
                            class="blog-logo"
                            src={{this.settings.logo}}
                            {{on "click" uploader.triggerFileDialog}}
                            data-test-logo-img
                        >
                        <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.update null)}} data-test-delete-image="logo">
                            {{svg-jar "trash" class="w4 h4"}}
                        </button>
                    </div>
                {{else}}
                    <button id="publication-logo" type="button" class="gh-btn gh-btn-white self-start" {{on "click" uploader.triggerFileDialog}} data-test-image-upload-btn="logo">
                        <span>Upload logo</span>
                    </button>
                {{/if}}
                <div class="dn">
                    <GhFileInput
                        @multiple={{false}}
                        @action={{uploader.setFiles}}
                        @accept={{this.imageMimeTypes}}
                        @onInsert={{uploader.registerFileInput}}
                        data-test-file-input="logo" />
                </div>
            </div>
        </div>
    </GhUploader>
</div>